<!--
 * @Author: toString muzi_li0323@163.com
 * @Date: 2024-05-23 21:53:00
 * @LastEditors: toString muzi_li0323@163.com
 * @LastEditTime: 2024-05-28 13:40:05
 * @FilePath: /chain-link-api-front/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 模块说明 -->
<template>
  <div>
    <el-config-provider :locale="elLocale">
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import zhTw from 'element-plus/dist/locale/zh-tw.mjs'
import jaJp from 'element-plus/dist/locale/ja.mjs'
import koKr from 'element-plus/dist/locale/ko.mjs'
import en from 'element-plus/dist/locale/en.mjs'
// 引入 elementplus 日语 韩语 繁体中文


import { useUserStore } from "@/stores"
// 导入 i18n 模块，国际化
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();

const userStore = useUserStore();
// 判断语言
const elLocale = computed(() => {
  const locale = userStore.getLocale
  switch (locale) {
    case 'zh-CN':
      return zhCn
    case 'zh-TW':
      return zhTw
    case 'ja-JP':
      return jaJp
    case 'ko-KR':
      return koKr
    case 'en-US':
      return en
    default:
      return zhTw
  }
})

// const elLocale = computed(() => (userStore.getLocale === 'zh-CN' ? zhCn : en))

watch(() => userStore.getLocale, (newVal) => {
  locale.value = newVal
}, { immediate: true })

// if ('worklet' in CSS) {
//   CSS.paintWorklet.addModule('@/utils/workers.js');
//   CSS.paintWorklet.registerPaint(
//       'my-paint-worklet',
//       class extends PaintWorkletGlobalScope {
//         paint(ctx, geom, properties) {
//           // Your painting logic here
//         }
//       }
//   );
// }


</script>
<style lang="less" scoped>
html,
body {
  font-size: 100px;
  min-height: 100%;
  background-color: #efefef;

  div {
    font-size: 0.14rem !important;
  }
}



:deep(.el-pagination) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: .1rem;
  box-sizing: border-box;

}

:deep(.el-table__body) {
  width: 100% !important;
}

:deep(.el-button:focus) {
  outline: none;
}

:deep(.el-dropdown-link:focus) {
  outline: none;
}

:deep(.el-dialog__headerbtn:focus) {
  outline: none;
}

:deep(.el-dialog){
  border-radius: 10px !important;
}

.tooltip-base-box {
  width: 600px;
}

.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tooltip-base-box .center {
  justify-content: center;
}

.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}


</style>
